import React, { Component } from 'react'
import './index.less'
import { Row, Col } from 'antd'
import Util from '../../util/util'
import axios from '../../axios'

export default class Header extends Component{
    constructor(props) {
        super(props)
        this.state = {
            userName: '小可爱',
            syTime: ''
        }
    }

    componentWillMount() {
        this.setState({
            userName: '旅行青蛙'
        })
        setInterval(() => {
            let syTime = Util.formateDate(new Date().getTime())
            this.setState({
                syTime: syTime
            })
        }, 1000)
        this.getWeatherAPIData()
    }
    getWeatherAPIData () {
        let city = '杭州'
        axios.jsonp({
            url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=Dzx0XRwn9wuVD3mZaKGiatO5HtNHse42'
        }).then((res) => {
            let data = res.results[0].weather_data[0]
            this.setState({
                dayPictureUrl: data.dayPictureUrl,
                weather: data.weather
            })
        }).catch((res) => {
            console.log(res)
        })
    }
    render(){
        return (
            <div className="header">
                <Row className="header-top">
                    <Col span="24">
                        <span>欢迎，{this.state.userName}</span>
                        <a href="/">退出</a>
                    </Col>
                </Row>
                <Row className="breadcrumb">
                    <Col span="4" className="breadcrumb-title">
                        首页
                    </Col>
                    <Col span="20" className="weather">
                        <span className="date">{this.state.syTime}</span>
                        <span className="weater-img">
                            <img src={this.state.dayPictureUrl} alt=""/>
                        </span>
                        <span className="weater-detail">
                            {this.state.weather}
                        </span>
                    </Col>
                </Row>
            </div>
        )
    }
}